在沒有框架前，條件判斷都是寫在 Javascript 裡面，但是有了 Vue 之後，可以直接在 HTML 需要判斷的 tag 中寫入判斷式，大幅減少程式碼量。

Vue 範例程式碼

同樣先附上今天練習內容會寫到 Vue 部分的程式碼

const vm = Vue.createApp({
  data: () => {
    return {
      showContent: true,
      num: 0,
      nameList: ['Alex', 'Brenda', 'Carter', 'David'],
      articles: {
          name: '30days challenge',
          usedTime: 'infinite',
          date: '2021/10/08'
      }
    }
  },
}).mount('#app');

隱藏畫面元素 v-show

v-show 搭配布林值（或是 truthy or falsy）來決定要不要顯示該元素，不顯示時會加上display: none; 的樣式。

<div id="app">
  <input type="checkbox" v-model="showContent">
  <p v-show="showContent">True</p>
  <p v-show="!showContent">False</p>
  <p>{{ showContent }}</p>
</div>

上面的範例搭配 checkbox 來切換顯示的項目。

條件判斷 v-if／v-else-if/v-else

v-if 系列的用法可以直接在 HTML 寫條件是判斷，不需要在 HTML 和 JS 檔案間切換來看有沒有操作到對的 DOM 了。

<div id="app">
  <p v-if="num===2">First</p>
  <p v-else-if="num===1">Second</p>
  <p v-else>Third</p>
</div>

上面的範例程式執行完，只會顯示 Third ，其他兩個 p 標籤不符合條件不會加到 HTML 內。

迴圈 v-for

在製作選單、商品列表等畫面時就會使用迴圈來連續產出標籤，在 JS 中組字串常常組錯，現在有樣板字串方便很多，但是結合在 HTML 內撰寫更直覺。

1. 撰寫格式是item in 陣列名稱，item 的名稱可以自行變更。

   <div id="app">
     <ul>
       <li v-for="name in nameList">{{name}}</li>
     </ul>
   </div>
   

2. 也可以加入索引值來使用，名稱可以不是 index，但是盡量以能辨識為主

   <div id="app">
     <ul>
       <li v-for="(name, index) in nameList">{{index + 1}} - {{name}}</li>
     </ul>
   </div>
   

3. 索引值可以搭配 v-show 或 v-if 來產製不同的樣式

   <div id="app">
     <ul>
       <li v-for="(name, index) in nameList" v-show="index == 1">{{index + 1}} - {{name}}</li>
     </ul>
   </div>
   

4. 搭配物件使用，把物件內的值都列出來

   <div id="app">
    <ul>
      <li v-for="item in articles">{{item}}</li>
    </ul>
   </div>